<template>
	<view class="page">
		<view class="list">
			<view class="item u-flex u-flex-between">
				<view class="left-info u-flex">
					<view class="icon">
						<u-icon name="server-man" color="#fd983c" size="80"></u-icon>
					</view>
					<view class="base-info">
						<view class="h1">在线客服</view>
						<view class="h2">在线联系，随时沟通，随时跟进</view>
					</view>
				</view>
				
				<view class="right-info" @click="showKfQr()">
					<view class="btn">在线客服</view>
				</view>
			</view>
			
			<view class="item u-flex u-flex-between">
				<view class="left-info u-flex">
					<view class="icon">
						<u-icon name="phone-fill" color="#fc403c" size="80"></u-icon>
					</view>
					<view class="base-info">
						<view class="h1">拨打电话</view>
						<view class="h2">电话联系，高效快捷，1v1服务</view>
					</view>
				</view>
				
				<view class="right-info" @click="callPhone()">
					<view class="btn">拨打电话</view>
				</view>
			</view>
		</view>
		
		<view class="qr-wrap u-flex" v-if="showKf">
			<view class="kf-service-qr-wrap">
				<view class="image-wrap">
					<image class="kf-service-qr" :src="kfQrcode" :show-menu-by-longpress="true" mode="aspectFit"></image>
				</view>
				<text class="kf-service-tips">长按识别二维码添加</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { kfService } from '@/api/api.js'
	export default {
		data() {
			return {
				showKf: false,
				kfQrcode: '',
				kfPhone: '',
			};
		},
		methods: {
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.kfPhone
				})
			},
			showKfQr() {
				this.showKf = this.showKf==false
			}
		},
		mounted() {
			kfService().then(res => {
				this.kfQrcode = res.data.kfQrcode
				this.kfPhone = res.data.kfPhone || ''
			})
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 30rpx 20rpx;
		font-size: 28rpx;
		.list {
			.item {
				margin-bottom: 20rpx;
				align-items: center;
				.left-info {
					.icon {
						margin-right: 10rpx;
					}
					.base-info {
						.h1 {
							font-weight: bold;
							margin-bottom: 4rpx;
						}
						.h2 {
							color: $uni-color-subtitle;
							font-size: 24rpx;
						}
					}
				}
				.right-info {
					.btn {
						background-color: #f70b37;
						color: #fff;
						padding: 10rpx 20rpx;
						font-size: 24rpx;
						border-radius: 26rpx;
					}
				}
			}
		}
		
		.qr-wrap {
			margin-top: 200rpx;
			justify-content: center;
			.kf-service-qr-wrap {
				@include flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				.image-wrap {
					background-color: #ecf5ff;
					border-radius: 10rpx;
					width: 300rpx;
					height: 300rpx;
					@include flex;
					justify-content: center;
					align-items: center;
					.kf-service-qr {
						width: 280rpx;
					}
				}
				.kf-service-tips {
					font-size: 26rpx;
					padding: 10rpx 40rpx;
					text-align: center;
					background-color: #ecf5ff;
					border-radius: 12rpx;
					margin: 20rpx 0;
				}
			}
		}
	}
</style>
